<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <title>Title</title>
    <style>
        .v-box {
            display: flex;
            flex-direction: column;
        }

        .h-box, .tool-bar {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: start;
        }

        .tool-bar {
            background-color: royalblue;
            height: 48px;
            color: white;
            padding: 0 16px 0 16px;
            font-size: 1.2em;
            align-items: center;
        }

        /*项目*/
        .login-label {
            color: #00000050;
        }

        .login-input {
            background-color: white;
            border-radius: 4px;
            border: 2px solid #00000020;
            height: 32px;
            font-size: 1em;
            padding-left: 12px;
            padding-right: 12px;
        }

        .login-check-parent {
            color: #00000080;
            font-size: 1em;
        }

        .login-check {
            width: 20px;
            height: 16px;
        }
    </style>
</head>
<body style="margin: 0">
<div id="app" class="v-box" style="padding: 0; height: 100vh; background-color: #00000006">
    <div class="tool-bar">
        登录
    </div>
    <div class="h-box" style="justify-content: center; align-items: center; height: 20vh">
        <img style="width: 48px; height: 48px" src="/assets/images/icon.png" alt="icon">
    </div>
    <div class="v-box" style="height: 80vh; padding: 0 16px 0 16px">
        <div class="v-box">
            <label class="login-label">账号</label>
            <input class="login-input" style="margin-top: 8px;" type="text" placeholder="请输入账号" v-model="account"/>
        </div>
        <div class="v-box" style="margin-top: 16px">
            <label class="login-label">密码</label>
            <input class="login-input" style="margin-top: 8px" type="password" placeholder="请输入密码"  v-model="password"/>
        </div>
        <div class="h-box" style="margin-top: 16px">
            <div class="h-box login-check-parent" style="align-items: center">
                <input type="checkbox" name="savePassword" value="savePassword" class="login-check" v-model="savePassword">保存密码
            </div>
            <div class="h-box login-check-parent" style="align-items: center; margin-left:16px">
                <input type="checkbox" name="autoLogin" value="autoLogin" class="login-check"  v-model="autoLogin">自动登录
            </div>
        </div>
        <button style="background-color: royalblue; color: white; font-size: 1em;border: 0; border-radius: 4px; height: 40px;margin-top: 2em">
            登录
        </button>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            account: null,
            password: null,
            savePassword: true,
            autoLogin: false
        },

    })
</script>
</html>